<template>
  <div class="app-container">
    <el-tag style="margin-bottom:20px;">
      <a
        href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable"
        target="_blank"
      >
        Documentation
      </a>
    </el-tag>
    <tree-table
      :data="data"
      :columns="columns"
      border
    />
  </div>
</template>

<script lang="ts">
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import treeTable from '@/components/TreeTable/index.vue';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: { treeTable },
})
export default class TreeTableDemo extends Vue {
  public columns = [
    {
      text: '事件',
      value: 'event',
      width: 200,
    },
    {
      text: 'ID',
      value: 'id',
    },
    {
      text: '时间线',
      value: 'timeLine',
    },
    {
      text: '备注',
      value: 'comment',
    },
  ];

  public data = [
    {
      id: 0,
      event: '事件1',
      timeLine: 50,
      comment: '无',
    },
    {
      id: 1,
      event: '事件1',
      timeLine: 100,
      comment: '无',
      children: [
        {
          id: 2,
          event: '事件2',
          timeLine: 10,
          comment: '无',
        },
        {
          id: 3,
          event: '事件3',
          timeLine: 90,
          comment: '无',
          children: [
            {
              id: 4,
              event: '事件4',
              timeLine: 5,
              comment: '无',
            },
            {
              id: 5,
              event: '事件5',
              timeLine: 10,
              comment: '无',
            },
            {
              id: 6,
              event: '事件6',
              timeLine: 75,
              comment: '无',
              children: [
                {
                  id: 7,
                  event: '事件7',
                  timeLine: 50,
                  comment: '无',
                  children: [
                    {
                      id: 71,
                      event: '事件71',
                      timeLine: 25,
                      comment: 'xx',
                    },
                    {
                      id: 72,
                      event: '事件72',
                      timeLine: 5,
                      comment: 'xx',
                    },
                    {
                      id: 73,
                      event: '事件73',
                      timeLine: 20,
                      comment: 'xx',
                    },
                  ],
                },
                {
                  id: 8,
                  event: '事件8',
                  timeLine: 25,
                  comment: '无',
                },
              ],
            },
          ],
        },
      ],
    },
  ];
}
</script>
